<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>广告</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#a {
				width: 500px;
				height: 500px;
				background: black;
				z-index: -1;
			}
			
			#b {
				width: 50px;
				height: 50px;
				background: red;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="a">
			<div id="b"></div>
		</div>
		<script>
			var b = document.getElementById('b');
			var x = 0;
			var y = 0;

			function time() {

				if(x < 450) {
					x = x + 50;
					y = y + 50;
					b.style.left = x + 'px';
					b.style.top = y + 'px';
				} else {
					if(x > 0) {
						x = x + 50;
						y = y + 50;
						b.style.left = x + 'px';
						b.style.top = y + 'px';
					}
				}

			}
			setInterval(time, 500);
		</script>
	</body>

</html>